<template>
	<uni-popup ref="popupRef" type="bottom" :safe-area="false" :mask-click="false">
		<view class="popup-container" :style="[{ height: scrollHeight }]">
			<view class="popup-content" :style="[{ height: scrollHeight }]">
				<view class="popup-close" @click="onClickHandler"></view>
				<scroll-view class="popup-inner" scroll-y="true">
					<view id="popup-content">
						<view class="title">一、签到</view>
						<view class="p">每日2个福分，连续3天翻倍，及时发放。</view>
						<view class="title">二、邀请注册会员</view>
						<view class="p">客户在“福分乐园-邀请好友”中将本人推荐二维码发送给亲友，邀请其关注公众号并注册会员后可获得10个福分，即时发放。</view>
						<view class="title">三、实名认证会员</view>
						<view class="p">活动期间，凡进行实名制认证会员，可获得50福分。</view>
						<view class="more">更多惊喜，敬请期待...</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, reactive, defineExpose, nextTick, getCurrentInstance } from 'vue'
	
	// 当前实例
	const instance = getCurrentInstance();
	
	// 弹窗实例
	const popupRef = ref()
	
	// 动态滚动区域高度（最高70vh）
	const scrollHeight = ref('70vh')
	
	// 弹框高度（相较于全屏）
	const popupHeight = 0.5
	
	// 滚动高度处理（动态高度，防止大尺寸手机展示弹窗时，文案不足，底部过多空白问题）
	function scrollHeightHandler(){
		uni.getSystemInfo({
			success: function (res1) {
				const query = uni.createSelectorQuery().in(instance.proxy)
				query.select('#popup-content').boundingClientRect()
				query.exec((res2) => {
					// 最大为系统高度的50%
					if((res1.windowHeight * popupHeight) > res2[0].height){
						scrollHeight.value = `${res2.height}px`
					}else{
						scrollHeight.value = '70vh'
					}
				})
			},
		})
	}
	
	// 关闭点击事件
	function onClickHandler(){
		popupRef.value.close()
	}
	
	// 打开弹窗
	function open(){
		popupRef.value.open()
		// 滚动高度处理
		nextTick(() => {
			scrollHeightHandler()
		})
	}
	
	// 暴露方法
	defineExpose({
		open,
	})
</script>

<style lang="less" scoped>
	.popup-container{
		// height: 70vh;
		.popup-content{
			// height: 70vh;
			background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/henan/activity/573dca43-b1e1-4169-8d2f-44c9199ef41d.png') no-repeat left top / 100%, linear-gradient(to bottom, transparent 0%, #fff 367rpx);
			overflow: hidden;
			position: relative;
			.popup-close{
				width: 70rpx;
				height: 70rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/henan/activity/843d4fe7-5f06-4e83-a90b-8db473d7ff99.png') no-repeat left top / 100%;
				position: fixed;
				top: -20rpx;
				right: 30rpx;
			}
			.popup-inner{
				margin-top: 320rpx;
				padding: 0 50rpx 50rpx 50rpx;
				height: calc(100% - 320rpx);
				box-sizing: border-box;
				position: relative;
				
				.title{
					font-size: 32rpx;
					font-weight: bold;
				}
				.p{
					color: #666;
					margin-bottom: 42rpx;
					margin-top: 12rpx;
				}
				.more{
					// position: fixed;
					// right: 0;
					// bottom: 30rpx;
					display: flex;
					color: #24C789;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					gap: 8rpx;
					font-size: 32rpx;
					&::before{
						content: '';
						display: block;
						width: 40rpx;
						height: 40rpx;
						background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/henan/activity/fc51d16c-5b63-44cc-b92c-86e749243c05.png') no-repeat left top / 100%;
					}
				}
			}
		}
	}
</style>